<template>
  <div class="home_mian">
    <div style="position: relative; height: 450px">
      <div class="message_show">
        <div class="show_one">
          <h1>全民抗疫</h1>
          <span>团结一致，万众一心，早日战胜疫情，武汉加油，中国加油</span>
        </div>
        <div class="show_two">
          <el-carousel trigger="click" height="180px">
            <el-carousel-item>
              <h1>坚定信心</h1>
              <span
                >科学宣传疫情防护知识，提高公众自我保护意识;
                加强防控，一起加油。众志成城，抗击疫情;
                疫情就是命令，防控就是责任。</span
              >
            </el-carousel-item>
            <el-carousel-item>
              <h1>同舟共济</h1>
              <span
                >居家隔离，减少外出，就是最好的防护;
                听从号召尽量待在家中，不串门不聚会;
                正确佩戴口罩，做好防护，养成良好卫生习惯。</span
              >
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="message_text">
        <span
          >恩施位于湖北省西南部，地处鄂、湘、渝三省（市）交汇处，地处武汉和重庆两大“火炉”之间，是最适宜人类居住的地区之一</span
        >
      </div>
    </div>
    <div class="home_message">
      <div class="message_h">
        <h1>Hi! EnShi</h1>
        <h2>2022 正确打卡恩施方式</h2>
        <span class="message_text_one">你要不要跟我走</span>
        <span class="message_text_two" @click="changeAudioStatu"
          >嗯？点这里>></span
        >
      </div>
    </div>
    <div class="message_fes">
      <el-icon size="20em"><data-analysis /></el-icon>
      <div class="fes_message">
        <span>恩施概况</span>
        <p>{{ customsListData }}</p>
      </div>
    </div>
    <div class="message_textAuto">
      <h1>
        何为
        <span>"硒"</span>
      </h1>
      <div class="textAuto_text">
        <h2>
          硒是人和动物生命所必需的微量元素，元素符号为Se，我国有72%的县(市)属于低硒和缺硒地区，黑龙江、内蒙古、甘肃、青海、四川等严重缺硒地区有克山病、大骨节病发生，一些癌症高发区（如江苏启东市）也属低硒区
        </h2>
        <h2>
          恩施市产出的各种农作物和中草药里含有大量的硒元素，经常食用可以保护视力，提高免疫力，防癌抗衰老。著名的特产食品有：富硒茶、富硒玉米粉、硒矿泉水、莼菜、摩芋、葛仙米、凤姜。富硒药材主要有板党、窑归、鸡爪黄连、黄芪、杜仲、贝母、贯叶连翘等。
        </h2>
        <h2>
          硒都是恩施市的别名。硒都是迄今为止“全球唯一探明独立硒矿床”所在地，境内硒矿蕴藏量居世界第一，还是世界天然生物硒资源最富集的地区，被誉为<span>“世界第一天然富硒生物圈”</span>，是全球唯一获得<span>“世界硒都”</span>称号的城市。
        </h2>
      </div>
    </div>
    <ElDialog
      width="1000px"
      v-model="aduioMessageStatu"
      destroy-on-close
    >
      <AduioMessage @close="closeAddFavoriteClass" />
    </ElDialog>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from "vue";
import { ElCarousel, ElDialog } from "element-plus";
import AduioMessage from "./dialog/aduioMessage.vue";
import { description } from "@/utils/fetch/api";
import { DataAnalysis } from "@element-plus/icons";
import { useStore } from "@/store/index"
export default defineComponent({
  components: {
    ElCarousel,
    ElDialog,
    AduioMessage,
    DataAnalysis,
  },
  setup() {

    const store = useStore();

    //audio
    const aduioMessageStatu = ref(false);
    const changeAudioStatu = () => {
      aduioMessageStatu.value = true;
    };
    const closeAddFavoriteClass = () => {
      aduioMessageStatu.value = false;
    };

    const customsListData = ref();
    const refreshdescription = async () => {
      const data = await description();
      customsListData.value = data.data;

      store.state.isLoading = false
    };

    onMounted(() => refreshdescription());
    return {
      aduioMessageStatu,
      changeAudioStatu,
      closeAddFavoriteClass,
      customsListData,
    };
  },
});
</script>

<style lang="less" scoped>
.home_mian {
  .message_text {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: #0000006e;
    display: flex;
    align-items: center;
    color: black;
    span {
      color: #ffcc33bd;
      font-size: 10px;
      margin-left: 20px;
    }
  }
  .message_show {
    position: absolute;
    right: 180px;
    bottom: 20px;
    width: 330px;
    height: 380px;
    z-index: 5;
    div {
      box-sizing: border-box;
      padding: 10px 20px;
      width: 100%;
      height: 180px;
      text-align: left;
    }
    h1 {
      font-size: 35px;
      margin: 10px 0;
    }
    .show_one {
      background: #ffcc33bd;
      color: white;
      span {
        font-size: 18px;
      }
    }
    .show_two {
      padding: 0;
      .el-carousel {
        padding: 0;
        background: #ffffffbd;
        overflow: hidden;
      }
      span {
        font-size: 14px;
      }
    }
  }

  .home_message {
    width: 100%;
    background: white;
    box-sizing: border-box;
    padding: 2em;
    .message_h {
      width: 100%;
      height: 300px;
      text-align: left;
      h1 {
        margin: 0;
        font-size: 8em;
        color: #ffcc33;
      }
      h2 {
        font-size: 3em;
        margin: 0 0 1em 0;
      }
      span {
        font-size: 2em;
      }
      .message_text_one {
        color: #a9a6a6;
        margin-right: 3em;
      }
      .message_text_two {
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }
  /deep/.el-dialog {
    background: transparent;
  }
  /deep/.el-dialog__header {
    display: none;
  }
  /deep/.el-dialog__body {
    padding: 0;
    margin: 0;
  }

  .message_fes {
    width: 100%;
    height: 400px;
    background: #ffcc33;
    color: white;
    overflow: hidden;
    display: flex;
    .el-icon {
      left: 0;
      transform: rotate(13deg);
    }
    .fes_message {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      span {
        font-size: 3em;
      }
      p {
        width: 80%;
        margin: 0;
        margin-top: 2em;
        text-indent: 2em;
        font-size: 1.5em;
      }
    }
  }

  .message_textAuto {
    width: 100%;
    height: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    h1 {
      font-size: 3em;
      span {
        font-size: 2em;
        color: #ffcc33;
      }
    }
    .textAuto_text{
      width: 60em;
      h2{
        text-indent: 2em;
        span{
          font-size: 1.5em;
          color: #ffcc33;
        }
      }
    }
  }

  
}
</style>
